<template>
    <div>
      <!--    面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><b>题目管理</b></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/FindSet' }">查询题目集</el-breadcrumb-item>
        <el-breadcrumb-item><span style="color: #545c99">{{this.setName}}</span></el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-row>
          <el-col :span="11">
            <el-input placeholder="请输入搜索内容" v-model="queryInfo.searchInfo" clearable @clear="getStudentList">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          style="width: 100%"
          :header-cell-style="{color: '#000000E6'}"
          :default-sort="{ prop: 'username', order: 'descending'}" :data="pagestulist">
          <el-table-column fixed type="index" label="#"></el-table-column>
          <el-table-column align="center" prop="username" sortable label="学号"></el-table-column>
          <el-table-column align="center" prop="name" label="姓名"></el-table-column>
        </el-table>
        <!--      分页区域-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[ 10, 20, 30, 40]"
          :page-size="queryInfo.pagesize"
          hide-on-single-page
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
    </div>
</template>

<script>
  export default {
    name: 'SetDetails',
    data(){
      return{
        setId: '',
        setName: '',
        // 获取班级学生列表的参数对象
        queryInfo: {
          // 模糊搜索
          searchInfo: '',
          // 当前页数
          pagenum: 1,
          pagesize: 10
        },
        total: 0,
        Stulist: [],
        loading: true,
      }
    },
    created () {
      this.getSetInfo()
    },
    methods:{
      getSetInfo(){
        this.setId = this.$route.query.setId
        this.setName = this.$route.query.setName
        console.log(this.setId)
        this.getStudentList()
      },
      async getStudentList() {
        var id = this.setId
        const { data: res } = await this.$http.get('/student/allStuOfSet/' + id)
        if (res.status !== 200) {
          return this.$message.error(res.msg)
        }
        this.Stulist = res.data
        console.log(res.data)
        if (this.Stulist.length === res.data.length){
          this.total = this.Stulist.length
          this.loading = false
        }
      },
      // 监听 pagesize 改变的事件
      handleSizeChange (newSize) {
        this.queryInfo.pagesize = newSize
        this.getStudentList()
      },
      // 监听页码值改变的事件
      handleCurrentChange (newPage) {
        // console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getStudentList()
      },
    },
    computed: {
      pagestulist: function () {
        var search = this.queryInfo.searchInfo
        if (search) {
          return this.Stulist.filter(function (data) {
            return Object.keys(data).some(function (key) {
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.Stulist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
      }
    }
  }
</script>

<style scoped>

</style>
